<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        
        #allmap {
            width: 100%;
            height: 100%;
        }
        
        p {
            margin-left: 5px;
            font-size: 14px;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=7d3a4c6e5e8a70dd200a2eeacf8c1b50"></script>
    <title>添加复杂内容的信息窗口</title>
</head>

<body>
    <div id="allmap"></div>
</body>

</html>
<script type="text/javascript">
    // 百度地图API功能
    var sContent =
        "<h4 style='margin:0 0 5px 0;color:#ffffff;background:blue;width:100%'>监测点信息</h4>" +
        "<p style='margin:5;line-height:1.5;font-size:13px;text-indent:2em'>G131-甲烷:0%LEL</p>" +
        "<p style='margin:5;line-height:1.5;font-size:13px;text-indent:2em'>G131-风向:0.1° 西北风</p>" +
        "<p style='margin:5;line-height:1.5;font-size:13px;text-indent:2em'>G131-风速:6m/s</p>" +
        "<button style='margin: 2px 30px;color:blue;'>报警信息</button>" +
        "<button style='margin: 2px 30px;color:blue;'>介质信息</button>" + "</br>" +
        "<button style='margin: 2px 30px;color:blue;'>工艺流程</button>" +
        "<button style='margin: 2px 30px;color:blue;'>应急预案</button>" + "</br>" +
        "<button style='margin: 2px 30px;color:blue;'>应急流程</button>" +
        "<button style='margin: 2px 30px;color:blue;'>查看照片</button>"

    var map = new BMap.Map("allmap");
    var point = new BMap.Point(121.094984, 37.685528);
    var marker = new BMap.Marker(point);
    var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
    map.centerAndZoom(point, 15);
    map.addOverlay(marker);
    marker.addEventListener("click", function() {
        this.openInfoWindow(infoWindow);
        //图片加载完毕重绘infowindow
        // document.getElementById('imgDemo').onload = function() {
        //     infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
        // }
    });
</script>






<!-- <!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数字管廊地图</title>

    <style type="text/css">
        html {
            height: 100%
        }
        
        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        
        #container {
            height: 100%
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=7d3a4c6e5e8a70dd200a2eeacf8c1b50"></script>

</head>

<body>
    <div id="container"></div>
</body>
<script>
    // 百度地图API功能
    var sContent =
        "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>监测点信息</h4>" +
        "<p style='margin:5;line-height:1.5;font-size:13px;text-indent:2em'>G131-甲烷</p>" +
        "<p style='margin:5;line-height:1.5;font-size:13px;text-indent:2em'>G131-风向</p>" +
        "<p style='margin:5;line-height:1.5;font-size:13px;text-indent:2em'>G131-风速</p>" +
        "<button>报警信息</button>" +
        "<button>报警信息</button>" +
        "<button>报警信息</button>" +
        "<button>报警信息</button>" +
        "</div>";
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(121.094984, 37.685528);
    var marker = new BMap.Marker(point);
    var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
    map.centerAndZoom(point, 15);
    map.addOverlay(marker);
    marker.addEventListener("click", function() {
        this.openInfoWindow(infoWindow);
        //图片加载完毕重绘infowindow
        document.getElementById('imgDemo').onload = function() {
            infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
        }
    });

    // 百度地图API功能
    // var sContent =
    // "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>监测点信息</h4>" + 
    // "<p style='margin:5;line-height:1.5;font-size:13px;text-indent:2em'>G131-甲烷</p>" + 
    // "<p style='margin:5;line-height:1.5;font-size:13px;text-indent:2em'>G131-风向</p>" +
    // "<p style='margin:5;line-height:1.5;font-size:13px;text-indent:2em'>G131-风速</p>" +
    // "<button>报警信息</button>"+
    // "<button>报警信息</button>"+
    // "<button>报警信息</button>"+
    // "<button>报警信息</button>"+
    // "</div>";


    // var map = new BMap.Map("container");
    // var point = new BMap.Point(121.094984, 37.685528);
    // map.centerAndZoom(point, 15);
    // window.setTimeout(function() {
    //     map.panTo(new BMap.Point(121.094984, 37.685528));
    // }, 2000);
    // map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    // map.addControl(new BMap.NavigationControl());
    // map.addControl(new BMap.ScaleControl());
    // map.addControl(new BMap.OverviewMapControl());
    // map.addControl(new BMap.MapTypeControl());
    // map.setCurrentCity("山东"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
    // var marker = new BMap.Marker(point); // 创建标注    
    // map.addOverlay(marker); // 将标注添加到地图中
</script>

</html> -->